<script setup>

</script>

<template>
  <div>
    <div style="margin-bottom: 5px;">
      <el-input placeholder="请输入....." style="width: 200px"></el-input>
      <el-button>查询</el-button>
      <el-button>重置</el-button>
  </div>

  <el-table :data="tableData"
  :header-cell-style="{background:'#eaecf3',color:'rgb(106,117,119)'}" border
  >
  <el-table-column prop="id" label="ID" width="120">
  </el-table-column>
    <el-table-column prop="no" label="账号" width="120">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="120">
    </el-table-column>
  <el-table-column prop="age" label="年龄" width="120">
  </el-table-column>
    <el-table-column prop="sex" label="性别" width="120">
      <template slot-scope="scope">
        <el-tag
               :type="scope.row.sex ===1 ? 'primary' : 'success'"
               disable-transitions>{{ scope.row.sex===1?'男':'女' }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="roleId" label="角色" width="120">
      <template slot-scope="scope">
        <el-tag
            disable-transitions>{{ scope.row.roleId===0?'超级管理员':'管理员' }}</el-tag>
      </template>
    </el-table-column>
  <el-table-column prop="phone" label="电话" width="180">
  </el-table-column>
    <el-table-column prop="operate" label="操作" >
      <el-button>编辑</el-button>
      <el-button>删除</el-button>
    </el-table-column>
  </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[1, 5, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

    </div>

</template>
<script>
 export default {
   name:"MyMain",

   data() {
     return {
       tableData: [],
       pageSize:1,
       pageNum:1,
       total:0
     }
   },
   //在 beforeMount 生命周期钩子中调用 loadGet 方法。loadGet 方法通过 axios 发起 GET 请求到 http://localhost:8090/user/list，并打印响应结果。
   methods:{
     resetForm() {
       this.$refs.form.resetFields();
     },

     del(id) {
       console.log(id);

       this.$axios.get(this.$httpUrl + '/user/del?id=' + id)
           .then(res => res.data)
           .then(res => {
             console.log(res);
             if (res.code == 200) {
               this.$message({
                 message: '操作成功！',
                 type: 'success'
               });
               this.loadPost();
             } else {
               this.$message({
                 message: '操作失败！',
                 type: 'error'
               });
             }
           })
           .catch(error => {
             console.error('删除操作出错:', error);
             this.$message({
               message: '操作出错！',
               type: 'error'
             });
           });
     },
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
       this.pageNum=1
       this.pageSize=val
       this.loadPost()
     },
     handleCurrentChange(val) {
       console.log(`当前页: ${val}`);
       this.pageNum=val
       this.loadPost()
     },
     loadGet(){
       this.$axios.get(this.$httpUrl+'/user/list').then(res=>res
           .data).then(res=>{
            console.log(res)
       })
     },
     loadPost(){
       this.$axios.get(this.$httpUrl+'/user/listPage',{
         params: {
           pageNum: this.pageNum,
           pageSize: this.pageSize
         }
       }).then(res=>res.data).then(res=>{
         console.log(res)
         if (res.code==200){
           this.tableData=res.data
           this.total=res.total
         }else {
           alert('获取数据失败')
         }

       })
     }
   },
   beforeMount() {
     //this.loadGet();
     this.loadPost();
   }
 }
</script>

<style scoped>

</style>